<template>
  <!-- 购物车部分 -->
    <div class="cart">
        <div class="cart-left">
            <div class="cart-left-icon">
                <font-awesome-icon :icon="['fas', 'shopping-cart']" style="color: white;" />
                <div class="cart-left-icon-quantity" :style="totalCount>0?'background-color: red':'background-color:transparent'">{{totalCount>0?totalCount:''}}</div>
            </div>
            <div class="cart-left-info">
                <p class="allPrice">{{totalPrice>0?totalPrice:''}}&#165;</p>
                <p>另需配送费{{deliveryPrice}}元</p>
            </div>
        </div>
        <div class="cart-right">
            <div class="cart-right-item" @click="navigatorToPay">
                提交订单
            </div>
        </div>
    </div>
</template>

<script setup>
import {reactive, ref, toRaw, toRefs, watch} from "vue";
import router from "../route/route.js";

const totalPrice = ref(0)
const totalCount = ref(0)

const props = defineProps(["cart","deliveryPrice","businessId"])
const {cart,deliveryPrice,businessId} = toRefs(props)

import {useCartStore} from "../store/cart.js";
const cartStore = useCartStore()

watch(cart.value,(value)=>{
    //计算价格和件数
const total = toRaw(value).reduce((accumulator, currentItem) => {
    accumulator.quantity += currentItem.quantity;
    accumulator.foodPrice += currentItem.quantity * currentItem.food.foodPrice;
    return accumulator;
}, { quantity: 0, foodPrice: 0 });
    totalPrice.value = total.foodPrice
    totalCount.value = total.quantity
    //更新价格
    cartStore.setTotalPrice(totalPrice.value)
})

const navigatorToPay = ()=>{
    if (cart.value.length){
        router.push({path:'/confirmOrder'})
    }
    else {
        alert("请选择商品")
    }
}
</script>

<style scoped>
/****************** 购物车部分 ******************/
.cart{
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
}
.cart .cart-left{
    flex: 2;
    background-color: #505051;
    display: flex;
}
.cart .cart-left .cart-left-icon{
    width: 16vw;
    height: 16vw;
    box-sizing: border-box;
    border: solid 1.6vw #444;
    border-radius: 8vw;
    background-color: #3190E8;
    font-size: 7vw;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: -4vw;
    margin-left: 3vw;

    position: relative;
}
.cart .cart-left .cart-left-icon-quantity{
    width: 5vw;
    height: 5vw;
    border-radius: 2.5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}
.cart .cart-left .cart-left-info p:first-child{
    font-size: 4.5vw;
    color: #fff;
    margin-top: 1vw;
}
.cart .cart-left .cart-left-info p:last-child{
    font-size: 2.8vw;
    color: #AAA;
}
.cart .cart-right{
    flex: 1;
}
/*达到起送费时的样式*/
.cart .cart-right .cart-right-item{
    width: 100%;
    height: 100%;
    background-color: #38CA73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}
p{
    margin: 0;
}
.allPrice{
    text-align: left;
}
</style>